<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="../libs/dat.gui.min.js" type="text/javascript"></script>
    <link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/measure_distance_icon.png"/>
    <h1>DistanceMeasurementPlugin</h1>
    <h2>Configuring units and scale</h2>
    <p>In this example, we're loading a BIM model from the file system, then creating a couple of distance measurements
        programmatically.</p>
    <h3>Configure units and scale</h3>
    <div id="myDatGuiContainer"></div>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.js~DistanceMeasurementsPlugin.html"
               target="_other">DistanceMeasurementsPlugin</a>
        </li>
    </ul>
    <h3>Assets</h3>
    <ul>
        <li>
            <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
               target="_other">Model source</a>
        </li>
    </ul>
</div>

</body>
<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, XKTLoaderPlugin, DistanceMeasurementsPlugin} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas"
    });

    viewer.camera.eye = [-3.93, 2.85, 27.01];
    viewer.camera.look = [4.40, 3.72, 8.89];
    viewer.camera.up = [-0.01, 0.99, 0.039];

    viewer.scene.metrics.units = "meters";
    viewer.scene.metrics.scale = 10;
    viewer.scene.metrics.origin = [100, 0, 200];

    viewer.cameraControl.followPointer = true;

    //------------------------------------------------------------------------------------------------------------------
    // Load a model
    //------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt", // Creates a MetaObject instances in scene.metaScene.metaObjects
        edges: true
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a DistanceMeasurementsPlugin, with which we'll create DistanceMeasurements
    //------------------------------------------------------------------------------------------------------------------

    const distanceMeasurementsPlugin = new DistanceMeasurementsPlugin(viewer);

    distanceMeasurementsPlugin.on("mouseOver", (e) => {
        e.distanceMeasurement.setHighlighted(true);
    });

    distanceMeasurementsPlugin.on("mouseLeave", (e) => {
        e.distanceMeasurement.setHighlighted(false);
    });
    
    sceneModel.on("loaded", () => {

        //------------------------------------------------------------------------------------------------------------------
        // Create some DistanceMeasurements
        //------------------------------------------------------------------------------------------------------------------

        const myMeasurement1 = distanceMeasurementsPlugin.createMeasurement({
            id: "distanceMeasurement1",
            origin: {
                entity: viewer.scene.objects["0jf0rYHfX3RAB3bSIRjmoa"],
                worldPos: [0.04815268516540527, 6.0054426193237305, 17.76587677001953]
            },
            target: {
                entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
                worldPos: [4.70150089263916, 3.09493088722229, 17.766956329345703]
            },
            visible: true,
            wireVisible: true
        });

        const myMeasurement2 = distanceMeasurementsPlugin.createMeasurement({
            id: "distanceMeasurement2",
            origin: {
                entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
                worldPos: [0.44101902244149116, 2.513236278487104, 17.79690253112633]
            },
            target: {
                entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
                worldPos: [5.2587011937829935, 0.07359975878555769, 17.844586643910404]
            },
            visible: true,
            wireVisible: true
        });
    });

    var metrics = new function () {
        this.scale = 1.0;
        this.units = "meters";
    }();

    var update = function () {
        viewer.scene.metrics.scale = metrics.scale;
        viewer.scene.metrics.units = metrics.units;
        requestAnimationFrame(update);
    };

    update();

    var gui = new dat.GUI({autoPlace: false, width: "100%"});
    gui.add(metrics, 'scale', 0.1, 10.0);
    gui.add(metrics, 'units', ["meters", "centimeters", "millimeters", "yards", "feet", "inches"])

    var customContainer = document.getElementById('myDatGuiContainer');
    customContainer.appendChild(gui.domElement);
</script>
</html>